<template>
  <el-dialog
    :title="ruleForm.id ? '编辑员工' : '新增员工'"
    :visible="showDialog"
    width="50%"
    @close="handleClose"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="username">
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item v-if="!ruleForm.id" label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item v-if="ruleForm.id" label="分配角色" prop="roles">
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in roles" :key="item.id" :label="item.id">
            {{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-if="ruleForm.id" label="头像" prop="image">
        <ImageUpload ref="imageUpload" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="btnOk">确认</el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { registerUser, getEmployeeById, getRoles, editUser } from '@/api/employee'
export default {
  components: {
    ImageUpload
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        username: '',
        email: '',
        password: ''
      },
      checkList: [],
      roles: [],
      rules: {
        username: [
          { required: true, message: '请输入客户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        email: [
          {
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
            message: '输入正确的邮箱号',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getEmployeeById(id) {
      const res = await getEmployeeById(id)
      const { data } = await getRoles()
      this.ruleForm = res.data
      this.roles = data
      this.checkList = this.ruleForm.roles.map((item) => item.id)
      await this.$emit('update:showDialog', true)
      this.$refs.imageUpload.fileList = [{ url: this.ruleForm.image }]
    },
    async btnOk() {
      try {
        await this.$refs.ruleForm.validate()
        if (this.ruleForm.id) {
          //  编辑

          const fileList = this.$refs.imageUpload.fileList
          if (fileList[0] && fileList[0].status !== 'success') {
            this.$message.error('图片上传中，请稍等！')
            return
          }
          this.ruleForm.image = this.$refs.imageUpload.fileList[0].url
          await editUser({
            ...this.ruleForm,
            roles: this.checkList
          })

          this.$emit('getEmployeeList')
        } else {
          // 添加
          await registerUser({
            ...this.ruleForm,
            roles: this.checkList
          })
          this.$emit('getEmployeeList', 'add')
        }

        this.$message.success('操作成功')
        this.handleClose()
      } catch (error) {
        console.log(error)
      }
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        agent: '',
        name: '',
        image: '',
        email: '',
        phone: '',
        wechat: '',
        desc: ''
      }
      this.$refs.imageUpload ? this.$refs.imageUpload.fileList = [] : ''
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>
</style>
